import React, { useEffect, useState } from 'react';
import { ColumnType } from './interface';
import './style.less';

export interface TableProps {
  dataSource?: object[];
  columns?: ColumnType<object>[];
  scroll?: {
    x?: number | string;
    y?: number | string;
  };
}
export const Table: React.FC<TableProps> = props => {
  const { dataSource = [], columns = [], scroll } = props;

  // 固定表头
  const [isFixidHeader, setIsFixidHeader] = useState(false);
  useEffect(() => {
    if (scroll!.y) {
      setIsFixidHeader(true);
    }
  }, [scroll!.y]);

  // 固定列
  const [isFixedColumn, setIsFixedColumn] = useState(false);
  useEffect(() => {
    if (scroll!.x) {
      setIsFixedColumn(true);
    }
  }, [scroll!.x]);

  // 固定列和头
  const [isFixedColumnAndHeader, setIsFixedColumnAndHeader] = useState(false);
  useEffect(() => {
    if (scroll!.x && scroll!.y) {
      setIsFixedColumnAndHeader(true);
    }
  }, [scroll!.x, scroll!.y]);

  if (isFixedColumn) {
    return (
      <div className="ant-table-wrapper">
        <div className="ant-table ant-table-ping-left ant-table-ping-right ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right">
          <div className="ant-table-container">
            <div
              className="ant-table-content"
              style={{ overflow: 'auto hidden' }}
            >
              <table
                style={{
                  width: scroll!.x,
                  minWidth: '100%',
                  tableLayout: 'fixed',
                }}
              >
                <colgroup>
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col />
                  <col />
                  <col />
                  <col />
                  <col />
                  <col />
                  <col />
                  <col />
                  <col style={{ width: 100, minWidth: 100 }} />
                </colgroup>
                <thead className="ant-table-thead">
                  <tr>
                    <th
                      className="ant-table-cell ant-table-cell-fix-left"
                      style={{ position: 'sticky', left: 0 }}
                    >
                      Full Name
                    </th>
                    <th
                      className="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
                      style={{ position: 'sticky', left: 100 }}
                    >
                      Age
                    </th>
                    <th className="ant-table-cell">Column 1</th>
                    <th className="ant-table-cell">Column 2</th>
                    <th className="ant-table-cell">Column 3</th>
                    <th className="ant-table-cell">Column 4</th>
                    <th className="ant-table-cell">Column 5</th>
                    <th className="ant-table-cell">Column 6</th>
                    <th className="ant-table-cell">Column 7</th>
                    <th className="ant-table-cell">Column 8</th>
                    <th
                      className="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
                      style={{ position: 'sticky', right: 0 }}
                    >
                      Action
                    </th>
                  </tr>
                </thead>
                <tbody className="ant-table-tbody">
                  <tr
                    data-row-key="1"
                    className="ant-table-row ant-table-row-level-0"
                  >
                    <td
                      className="ant-table-cell ant-table-cell-fix-left"
                      style={{ position: 'sticky', left: 0 }}
                    >
                      John Brown
                    </td>
                    <td
                      className="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
                      style={{ position: 'sticky', left: 100 }}
                    >
                      32
                    </td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td className="ant-table-cell">New York Park</td>
                    <td
                      className="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
                      style={{ position: 'sticky', right: 0 }}
                    >
                      <a>action</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (isFixidHeader) {
    return (
      <div className="ant-table-wrapper">
        <div className="ant-table ant-table-fixed-header">
          <div className="ant-table-container">
            <div className="ant-table-header" style={{ overflow: 'hidden' }}>
              <table style={{ tableLayout: 'fixed' }}>
                {columns.map(item => {
                  return <colgroup style={{ width: item.width }} />;
                })}
                <colgroup></colgroup>
                <thead className="ant-table-thead">
                  <tr>
                    {columns.map(item => {
                      return (
                        <th key={item.key} className="ant-table-cell">
                          {item.title}
                        </th>
                      );
                    })}
                    <th className="ant-table-cell ant-table-cell-scrollbar"></th>
                  </tr>
                </thead>
              </table>
            </div>
            <div
              className="ant-table-body"
              style={{ overflowY: 'scroll', maxHeight: scroll!.y }}
            >
              <table style={{ tableLayout: 'fixed' }}>
                {columns.map(item => {
                  return <colgroup style={{ width: item.width }} />;
                })}
                <tbody className="ant-table-tbody">
                  {dataSource.map((item: any, index) => {
                    return (
                      <tr
                        key={item.key}
                        data-row-key={index}
                        className={`ant-table-row ant-table-row-level-${0}`}
                      >
                        {columns.map(({ dataIndex = '' }) => {
                          return (
                            <td className="ant-table-cell">
                              {item[dataIndex]}
                            </td>
                          );
                        })}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (isFixedColumnAndHeader) {
    return (
      <div className="ant-table-wrapper">
        <div className="ant-table ant-table-ping-left ant-table-ping-right ant-table-fixed-header ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right">
          <div className="ant-table-container">
            <div className="ant-table-header" style={{ overflow: 'hidden' }}>
              <table style={{ tableLayout: 'fixed' }}>
                <colgroup>
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                </colgroup>
                <thead className="ant-table-thead">
                  <tr>
                    <th
                      className="ant-table-cell ant-table-cell-fix-left"
                      style={{ position: 'sticky', left: 0 }}
                    >
                      Full Name
                    </th>
                    <th
                      className="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
                      style={{ position: 'sticky', left: 100 }}
                    >
                      Age
                    </th>
                    <th className="ant-table-cell">Column 1</th>
                    <th className="ant-table-cell">Column 2</th>
                    <th className="ant-table-cell">Column 3</th>
                    <th className="ant-table-cell">Column 4</th>
                    <th className="ant-table-cell">Column 5</th>
                    <th className="ant-table-cell">Column 6</th>
                    <th className="ant-table-cell">Column 7</th>
                    <th className="ant-table-cell">Column 8</th>
                    <th
                      className="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
                      style={{ position: 'sticky', right: 0 }}
                    >
                      Action
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
            <div
              className="ant-table-body"
              style={{ overflow: 'auto scroll', maxHeight: 300 }}
            >
              <table
                style={{ width: 1500, minWidth: '100%', tableLayout: 'fixed' }}
              >
                <colgroup>
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col style={{ width: 100, minWidth: 100 }} />
                  <col />
                  <col style={{ width: 100, minWidth: 100 }} />
                </colgroup>
                <tbody className="ant-table-tbody">
                  <tr
                    data-row-key="1"
                    className="ant-table-row ant-table-row-level-0"
                  >
                    <td
                      className="ant-table-cell ant-table-cell-fix-left"
                      style={{ position: 'sticky', left: 0 }}
                    >
                      Edrward 1
                    </td>
                    <td
                      className="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
                      style={{ position: 'sticky', left: 100 }}
                    >
                      32
                    </td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td className="ant-table-cell">London Park no. 1</td>
                    <td
                      className="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
                      style={{ position: 'sticky', right: 0 }}
                    >
                      <a>action</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="ant-table-wrapper">
      <div className="ant-table">
        <div className="ant-table-container">
          <div className="ant-table-content">
            <table style={{ tableLayout: 'auto' }}>
              <colgroup></colgroup>
              <thead className="ant-table-thead">
                <tr>
                  {columns.map(item => {
                    return (
                      <th key={item.key} className="ant-table-cell">
                        {item.title}
                      </th>
                    );
                  })}
                </tr>
              </thead>
              <tbody className="ant-table-tbody">
                {dataSource.map((item: any, index) => {
                  return (
                    <tr
                      key={item.key}
                      data-row-key={index}
                      className={`ant-table-row ant-table-row-level-${index}`}
                    >
                      {columns.map(({ dataIndex = '' }) => {
                        return (
                          <td className="ant-table-cell">{item[dataIndex]}</td>
                        );
                      })}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

Table.defaultProps = {
  columns: [],
  scroll: {},
};
